<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React</title>
    <script src="../bower_components/babel/browser.js"></script>
    <!--<script src="../node_modules/react/umd/react.development.js"></script>-->
    <!--<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>-->
    <script src="../bower_components/react/react.development.js"></script>
    <script src="../bower_components/react/react-dom.development.js"></script>
    <script src="../node_modules/prop-types/prop-types.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">

        class ParentDiv extends React.Component{
            constructor(){
                super();
                this.state = {
                    inputValue: "input value"
                }
            }
            _handleClickEvent(e){
                // 禁止提交
                e.preventDefault();

                console.log(e);
                var formData = {
                    textareaInput: this.refs["textareaInput"].value,
                    textareaChange: this.refs["textareaChange"].value
                };
                console.log(formData)
            }
            _handleInputValue(e){
                this.setState({
                    inputValue: e.target.value
                })
            }
           render(){
               return (
                   <form onSubmit={this._handleClickEvent.bind(this)}>
                       <input id="textarea" ref="textareaInput" defaultValue="默认值" />
                       <input id="textarea" ref="textareaChange" value={this.state.inputValue} onChange={this._handleInputValue.bind(this)} />
                       <input type="submit" value="提交" />
                   </form>
               );
           }
        };

        var selectDom = ReactDOM.render(
            <ParentDiv/>,
            // exampleDom,
            document.getElementById('app')
        );
    </script>
</body>
</html>